<script setup lang="ts">
import { ObjectMeta } from "@/views/domain/kubeHud/api/k8s/types";
import { computed } from "vue";
import DescriptionItem from "./DescriptionItem.vue";
import { timeTrans } from "@/views/domain/kubeHud/utils";
import KDescGroup from "./KDescGroup.vue";
import KDescRow from "./KDescRow.vue";
import InTagLine from "./InTagLine.vue";
type Props = {
  metadata?: ObjectMeta;
  title?: string;
};

const props = defineProps<Props>();
const metadata = computed(() => props.metadata);
</script>

<template>
  <KDescGroup v-if="metadata" :title="title">
    <KDescRow label="Name" :content="metadata.name" />
    <KDescRow label="Namespace" :content="metadata.namespace" />
    <KDescRow
      label="Creation Time"
      :content="metadata.creationTimestamp"
      date-format="YYYY-MM-DD HH:mm:ss"
    />
    <KDescRow v-if="metadata.labels" label="Labels">
      <el-space wrap alignment="start">
        <InTagLine
          v-for="(value, key) in metadata.labels"
          :key="key"
          :title="key"
          :content="value"
        />
      </el-space>
    </KDescRow>
    <KDescRow v-if="metadata.annotations" label="Annotations">
      <el-space wrap alignment="start" direction="vertical">
        <InTagLine
          v-for="(value, key) in metadata.annotations"
          :key="key"
          :title="key"
          :content="value"
        />
      </el-space>
    </KDescRow>
    <slot />
  </KDescGroup>
</template>
<style lang="scss" scoped></style>
